<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- ======= Header ======= -->
    <header id="header"></header>
    <!-- ======= End Header =======-->
    <main>
        <!-- ====== 简介 =======-->
        <section id="hero">
            <img src="./images/portrait.png" alt="" class="portrait">
            <p class="slogan">我是一名大三学生,<br>同时也是一名<span>Web前端工程师</span></p>
            <a class="about-me" href="./about.html">关于我</a>
        </section>
        <!-- ====== 简介结束 ====== -->

        <!--=== 作品 ===-->
        <section id="portfolio">
            <h2 class="section-title">作品展示</h2>
            <div class="carousel container">
              <div class="arrows">
                <span class="prev invalid"></span>
                <span class="next"></span>
              </div>
              <div class="imgs flex threee">
                <div class="imgs-wrap">
                  <img src="images/portfolios/1@2x.png" alt="" />
                  <div class="imgs-info">
                    <h4>App 1</h4>
                    <div class="imgs-links">
                      <a href="#"><i class="iconfont qm-link"></i></a>
                    </div>
                  </div>
                </div>
                <div class="imgs-wrap">
                  <img src="images/portfolios/2@2x.png" alt="" />
                  <div class="imgs-info">
                    <h4>App 1</h4>
                    <div class="imgs-links">
                      <a href="#"><i class="iconfont qm-link"></i></a>
                    </div>
                  </div>
                </div>
                <div class="imgs-wrap">
                  <img src="images/portfolios/3@2x.png" alt="" />
                  <div class="imgs-info">
                    <h4>App 1</h4>
                    <div class="imgs-links">
                      <a href="#"><i class="iconfont qm-link"></i></a>
                    </div>
                  </div>
                </div>
                <div class="imgs-wrap">
                  <img src="images/portfolios/1@2x.png" alt="" />
                  <div class="imgs-info">
                    <h4>App 1</h4>
                    <div class="imgs-links">
                      <a href="#"><i class="iconfont qm-link"></i></a>
                    </div>
                  </div>
                </div>
                <div class="imgs-wrap">
                  <img src="images/portfolios/2@2x.png" alt="" />
                  <div class="imgs-info">
                    <h4>App 1</h4>
                    <div class="imgs-links">
                      <a href="#"><i class="iconfont qm-link"></i></a>
                    </div>
                  </div>
                </div>
                <div class="imgs-wrap">
                  <img src="images/portfolios/3@2x.png" alt="" />
                  <div class="imgs-info">
                    <h4>App 1</h4>
                    <div class="imgs-links">
                      <a href="#"><i class="iconfont qm-link"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="more-box"><a class="btn orange look-more" href="./protfolio.html">查看更多</a></div>
          </section>
        <!--=== 作品结束 ===-->
        
        <!--=== 我的博客 ===-->
        <section id="blog">
          <h2 class="section-title blue">我的博客</h2>
          <div class="container article-wrap reeeo">
            <!-- <article>
              <a href="blog-single.html"><img src="./images/blogs/1.png" alt=""></a>
              <div class="content-wrap">
                <a href="blog-single.html">
                  <h3>大标题大标题大标题</h3>
                </a>
                <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                  whjiojf0jis js </p>
                <div class="flex justify-content-between align-items-center">
                  <span class="date"><i class="iconfont qm-clock"></i>2022-07-21</span>
                  <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </div>
              </div>
            </article>
            <article>
              <a href="blog-single.html"><img src="./images/blogs/2.png" alt=""></a>
              <div class="content-wrap">
                <a href="blog-single.html">
                  <h3>大标题大标题大标题</h3>
                </a>
                <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                  whjiojf0jis js </p>
                <div class="flex justify-content-between align-items-center">
                  <span class="date"><i class="iconfont qm-clock"></i>2022-07-21</span>
                  <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </div>
              </div>
            </article>
            <article>
              <a href="blog-single.html"><img src="./images/blogs/3.png" alt=""></a>
              <div class="content-wrap">
                <a href="blog-single.html">
                  <h3>大标题大标题大标题</h3>
                </a>
                <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                  whjiojf0jis js </p>
                <div class="flex justify-content-between align-items-center">
                  <span class="date"><i class="iconfont qm-clock"></i>2022-07-21</span>
                  <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </div>
              </div>
            </article>
            <article>
              <a href="blog-single.html"><img src="./images/blogs/4.png" alt=""></a>
              <div class="content-wrap">
                <a href="blog-single.html">
                  <h3>大标题大标题大标题</h3>
                </a>
                <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                  whjiojf0jis js </p>
                <div class="flex justify-content-between align-items-center">
                  <span class="date"><i class="iconfont qm-clock"></i>2022-07-21</span>
                  <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </div>
              </div>
            </article>
            <article>
              <a href="blog-single.html"><img src="./images/blogs/5.png" alt=""></a>
              <div class="content-wrap">
                <a href="blog-single.html">
                  <h3>大标题大标题大标题</h3>
                </a>
                <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                  whjiojf0jis js </p>
                <div class="flex justify-content-between align-items-center">
                  <span class="date"><i class="iconfont qm-clock"></i>2022-07-21</span>
                  <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </div>
              </div>
            </article>
            <article>
              <a href="blog-single.html"><img src="./images/blogs/6.png" alt=""></a>
              <div class="content-wrap">
                <a href="blog-single.html">
                  <h3>大标题大标题大标题</h3>
                </a>
                <p>jjf dji jdlajio jdklajiemjla03emi od09mefqwe whjiojf0jis js jjf dji jdlajio jdklajiemjla03emi od09mefqwe
                  whjiojf0jis js </p>
                <div class="flex justify-content-between align-items-center">
                  <span class="date"><i class="iconfont qm-clock"></i>2022-07-21</span>
                  <a class="more" href="blog-single.html">查看更多<i class="iconfont qm-arrow-right"></i></a>
                </div>
              </div>
            </article> -->
            
          </div>
          <img class="up" src="./images/blogs/up.png" hidden alt="">
          <div class="more-box"><a class="btn blue look-more" href="./blogs.html">查看更多</a></div>
        </section>
        <!--=== 我的博客结束 ===-->
    
        </main>
        <!-- ======= Footer ======= -->
  <div class="footer">
    &copy;Copyright刘钰森.All Rights Reserved
  </div><!-- End Footer -->
    <script src="./js/main.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>